<template>
  <div class="doctorregister">
    <div class="container">
      <!-- 头部信息 -->
      <Row>
        <Col :xs="24">
        <div class="margin-up-down">
            <Button type="primary" @click="addDoctor" class="addButton">
              <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
            </Button>
          </div>
        <div class="margin-up-down">
          <!-- :hospitalType="4" -->
          <fourLevelLinkage
              @changeProvince="changeProvince"
              @changeCity="changeCity"
              @changeArea="changeArea"
              @changeHospital="changeHospital"
              :province="province"
              :city="city"
              :area="area"
              :hospital="hospital"

            ></fourLevelLinkage>
        </div>
        <div class="margin-up-down">
          <Input
              v-model.trim="Name"
              placeholder="输入医生姓名/联系方式/医院名称进行查询"
              style="width: 260px"
              clearable
            />
        </div>
        <div class="margin-up-down">
            <Select class="w-select" placeholder="职称级别" clearable v-model="dcotorTitle" style='width:100px;'>
              <Option
                v-for="item in titleList"
                :value="item.dictType"
                :key="item.dictType"
                style='text-align:center'
              >{{item.dictName}}</Option>
            </Select>
          </div>
        <div class="margin-up-down">
          <Button type="primary" icon="ios-search" @click="findKbaoPharmacistPage(1)" style="width:51px;height:32px;"></Button>
        </div>
        <div class="margin-up-down">
          <Button  @click="handleReset()" style="width:51px;height:32px;">
            <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
          </Button>
        </div>
        </Col>
      </Row>
      <!-- 列表 -->
      <div class="list">
        <Table @on-selection-change="selectChange" :loading="tableLoading" border stripe :columns="columns1" :data="list"></Table>
      </div>
    </div>
    <!--分页器-->
    <div class="page">
      <Page :total="doctorregisterSize" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="pageChange"/>
    </div>
    <Modal v-model="modal1" title="预览信息" footer-hide>
      <p class="modal_p">{{ path }}</p>
    </Modal>

    <!-- 删除确认弹窗 -->
    <Modal
        v-model="showDelModal"
        title="确认删除弹窗"
        class="drugmanagement-commondrug-list-delModal">
        <p>删除后不可恢复，确认删除所选项吗？</p>
        <div slot="footer">
            <Button class="cancel-btn btn" @click="showDelModal = false">取消</Button>
            <Button class="save-btn btn" type="primary" :loading="delLoading" @click="handleDel">确认</Button>
        </div>
    </Modal>
  </div>
</template>
<script>

import api from "@/api/commonApi";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import cookie from "@/utils/cookie.js";
export default {
  components: {
    fourLevelLinkage
  },
  data() {
    return {
      tableLoading: false,
      province: null,
      city: null,
      area: null,
      hospital: null,
      selections: [],
      doctorregisterSize: 0,
      list: [],
      Name: "",
      pageNo: 1,
      pageSize: 10,
      modal1: false,
      path: "",
      dcotorTitle: null, // 医生职称
      titleList: "",
      columns1: [
        {title: "排序",key: "sum",width: 80,align: "center",
          render: (h, params) => {
              let sum = (this.pageNo-1)*this.pageSize + params.index +1;
              return h("span", sum);
          }
        },
        {title: "机构",key: "hospitalName",align: "center"},
        {title: "职称",key: "titleName",align: "center"},
        {title: "姓名",key: "name",align: "center"},
        {title: "性别",key: "gender",align: "center"},
        {title: "身份证号",key: "idcard",align: "center",
          render: (h, params) => {
            if(params.row.idcard){
              // let idcard = params.row.idcard.replace(/(\d{6})\d{8}(\d{4})/g,'$1********$2');
              let idcard = params.row.idcard.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2") ;
              return idcard
            }
            }
        },
        {title: "电话",key: "phone",align: "center",
        render: (h, params) => {
            if(params.row.phone){
              let phone = params.row.phone.replace(/^(.{3})(?:\w+)(.{4})$/, "\$1****\$2") ;
              return phone
            }
            }
        },
        {
          title: "设置",
          key: "iOperate",
          width: 200,
          align: "center",
          render: (h, params) => {
            let row = params.row;
            return h("div", [
              !params.row.wyAccid
                ? h(
                    "a",
                    {
                      props: {
                        type: "primary",
                        size: "small"
                      },
                      style: {
                          color: '#5362e1',
                          margin: "0px 6px"
                      },
                      on: {
                        click: () => {
                          this.handleEdit(row);
                        }
                      }
                    },
                    "编辑"
                  )
                : null,
                !params.row.wyAccid ? '|': null,
              h(
                "a",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                      color: '#21c780',
                      margin: "0px 6px"
                  },
                  on: {
                    click: () => {
                      this.handleReview(row);
                    }
                  }
                },
                "详情"
              ),
              !params.row.wyAccid ? '|': null,
              !params.row.wyAccid ?
              h(
                "span",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                      color: '#fc6c49',
                      marginLeft: "6px"
                  },
                  on: {
                    click: () => {
                      this.handleRemove(row);
                    }
                  }
                },
                "删除"
              ) : null
            ]);
          }
        }
      ],
      data1: [],
      showDelModal: false,
      delLoading: false,
      delType: null, // single batch
      curRecord: null,
    };
  },
  created() {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/maintain/indexManagement/index",
        title: "索引管理"
      },
      {
        path: "/index/maintain/pharmacyregister/list",
        title: "药师注册信息"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    let pageNo = this.$route.query.pageNo;
    if (pageNo) {
      this.pageNo = pageNo;
    }
    this.$axios.post(api.findDoctorTitleListByDoctorType,{type: 2}).then(resp => {
      this.titleList = resp.data.object;
    })
    this.findKbaoPharmacistPage(this.pageNo);
  },
  methods: {
    changeProvince(val) {
      this.province = val;
    },
    changeCity(val) {
      this.city = val;
    },
    changeArea(val) {
      this.area = val;
    },
    changeHospital(val) {
      this.hospital = val;
    },
    selectChange(selections) {
        this.selections = selections;
    },
    handleReset() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.province = null;
      this.city = null;
      this.area = null;
      this.Name = "";
      this.hospital = null;
      this.dcotorTitle = null;
      this.findKbaoPharmacistPage(this.pageNo);
    },
    handleEdit(item) {
      this.functionJS.queryNavgationTo(
        this,
        "/index/doctorOperation/pharmacyregister/edit",
        {
          pageNo: this.pageNo,
          id: item.id
        }
      );
    },
    handleRemove(record) {
      this.delType = 'single';
      this.showDelModal = true;
      this.curRecord = record;
    },
    handleDel() {
      if (this.delType === 'single') {
        this.delByDoctorIds([this.curRecord.id]);
      } else if (this.delType === 'batch') {
        if (!this.selections.length) {
          this.$Message.info('请勾选删除项');
          return false;
        }
        this.delByDoctorIds(this.selections.map(item => item.id))
      }
    },
    handleReview(item) {
      this.functionJS.queryNavgationTo(
        this,
        "/index/doctorOperation/pharmacyregister/review",
        {
          pageNo: this.pageNo,
          id: item.id
        }
      );
    },
    addDoctor() {
      this.functionJS.queryNavgationTo(
        this,
        "/index/doctorOperation/pharmacyregister/add",
        {
          pageNo: this.pageNo
        }
      );
    },
    // 分页
    pageChange(index) {
      this.findKbaoPharmacistPage(index);
    },
    // 显示简介
    simple(item) {
      if (!Boolean(item.personalIntroduction)) {
        this.$Message.info("暂无医生简介");
        return "";
      }
      this.modal1 = true;
      this.path = item.personalIntroduction;
    },
    // 显示特长
    simples(item) {
      if (!Boolean(item.doctorGood)) {
        this.$Message.info("暂无医生特长");
        return "";
      }
      this.modal1 = true;
      this.path = item.doctorGood;
    },
    delByDoctorIds(idArr) {
      this.delLoading = true;
      this.$axios.post(api.delByDoctorIds, idArr).then(res => {
        if (res.data.code === 1) {
          this.$Message.success('删除成功');
          this.findKbaoPharmacistPage();
          this.showDelModal = false;
        } else {
          this.$Modal.error({
              content: res.data.object.map(item => `<p>${item}</p>`).join('<br />'),
              okText: '确认',
              onOk: () => {
                this.showDelModal = false;
              }
          });
          // this.$Message.info(res.data.message);
        }
        this.delLoading = false;
      }).catch(() => {
        this.delLoading = false;
      });
    },
    // 获取页面数据
    findKbaoPharmacistPage(pageNo) {
      if  (pageNo) {
        this.pageNo = Number(pageNo);
      }
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        type: 2,
      };
      if (this.Name != "") {
        params.searchKey = this.Name.trim();
      }
      params.provinceCode = this.province ? this.province : null;
      params.cityCode = this.city ? this.city : null;
      params.areaCode = this.area ? this.area : null;
      params.hospitalId = this.hospital ? this.hospital : null;
      params.title = this.dcotorTitle ? this.dcotorTitle : null;
      //获取父级科室
      let department = cookie.getCookie("department") || '';
      params.department = department;
      console.log("医生注册信息params", params);
      this.tableLoading = true;
      this.$axios.post(api.getDoctorInfo, params).then(res => {
        if (res.data.code === 1) {
          let ret = res.data.object;
          let arr = ["个人注册", "批量导入", "平台注册"];
          if(ret.records){
            ret.records.forEach((item, index) => {
              item.sum = this.addZeros(index);
              item.gender = item.gender === 2 ? "女" : "男";
              item.ibatch = arr[item.ibatch];
            });
            this.list = ret.records;
          } else {
            this.list = []
          }
          this.doctorregisterSize = ret.total;
        } else {
          this.$Message.error(res.data.message);
        }
        this.tableLoading = false;
      }).catch(() => {
        this.tableLoading = false;
      });
    }
  },
  watch: {
    'pageSize'(nv, ov) {
        this.findKbaoPharmacistPage(this.pageNo)
    },
  }
};
</script>
<style lang="less" scoped>
.doctorregister {
  padding: 10px;
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  .container {
    width: 100%;
    margin: 0 auto;
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .addButton{
      border: 1px solid #21c780;
      background-color: #21c780;
    }
    header {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }
    .list {
      width: 100%;
      margin: 10px 0;
    }
  }
  .page{
      text-align: center;
    }
}
</style>
